<template>
  <section class="basic">
    <!-- 控制台 -->
    <!-- <el-row class="controlBoard">
      <el-col :span="2">
        <el-select v-model="condition.minute" size="medium" style="width:7rem" clearable>
          <el-option
            v-for="item in container"
            :key="item.value"
            :value="item.value"
            :label="item.value"
          ></el-option>
        </el-select>&nbsp;
        <i>分</i>
      </el-col>
      <el-col :span="2">
        <el-select v-model="condition.second" size="medium" style="width:7rem" clearable>
          <el-option
            v-for="item in container"
            :key="item.value"
            :value="item.value"
            :label="item.value"
          ></el-option>
        </el-select>&nbsp;
        <i>秒</i>
      </el-col>
      <el-col :span="1">
        <el-button type="success" size="medium" @click="start()">开始</el-button>
      </el-col>
      <el-col :span="1">
        <el-button type="danger" size="medium" @click="end()">结束</el-button>
      </el-col>
    </el-row>-->
    <el-row type="flex">
      <!-- <el-col :span="8" class="time">
        <img src="../assets/img/test.png" alt>
      </el-col>-->
      <el-col class="time" :span="24">
        <div>
          <div class="digit minutes">
            <div class="segment" v-bind:class="{'on': minutesOne.zero}"></div>
            <div class="segment" v-bind:class="{'on': minutesOne.one}"></div>
            <div class="segment" v-bind:class="{'on': minutesOne.two}"></div>
            <div class="segment" v-bind:class="{'on': minutesOne.three}"></div>
            <div class="segment" v-bind:class="{'on': minutesOne.four}"></div>
            <div class="segment" v-bind:class="{'on': minutesOne.five}"></div>
            <div class="segment" v-bind:class="{'on': minutesOne.six}"></div>
          </div>
          <div class="digit minutes">
            <div class="segment" v-bind:class="{'on': minutesTwo.zero}"></div>
            <div class="segment" v-bind:class="{'on': minutesTwo.one}"></div>
            <div class="segment" v-bind:class="{'on': minutesTwo.two}"></div>
            <div class="segment" v-bind:class="{'on': minutesTwo.three}"></div>
            <div class="segment" v-bind:class="{'on': minutesTwo.four}"></div>
            <div class="segment" v-bind:class="{'on': minutesTwo.five}"></div>
            <div class="segment" v-bind:class="{'on': minutesTwo.six}"></div>
          </div>
          <div class="separator"></div>
          <div class="digit seconds">
            <div class="segment" v-bind:class="{'on': secondOne.zero}"></div>
            <div class="segment" v-bind:class="{'on': secondOne.one}"></div>
            <div class="segment" v-bind:class="{'on': secondOne.two}"></div>
            <div class="segment" v-bind:class="{'on': secondOne.three}"></div>
            <div class="segment" v-bind:class="{'on': secondOne.four}"></div>
            <div class="segment" v-bind:class="{'on': secondOne.five}"></div>
            <div class="segment" v-bind:class="{'on': secondOne.six}"></div>
          </div>
          <div class="digit seconds">
            <div class="segment" v-bind:class="{'on': secondTwo.zero}"></div>
            <div class="segment" v-bind:class="{'on': secondTwo.one}"></div>
            <div class="segment" v-bind:class="{'on': secondTwo.two}"></div>
            <div class="segment" v-bind:class="{'on': secondTwo.three}"></div>
            <div class="segment" v-bind:class="{'on': secondTwo.four}"></div>
            <div class="segment" v-bind:class="{'on': secondTwo.five}"></div>
            <div class="segment" v-bind:class="{'on': secondTwo.six}"></div>
          </div>
        </div>
      </el-col>
      <!-- <el-col :span="8" class="time">
        <img src="../assets/img/test.png" alt>
      </el-col>-->
    </el-row>
    <el-row>
      <canvas ref="canvas"></canvas>
    </el-row>
  </section>
</template>
<script>
export default {
  data() {
    return {
      condition: {
        minute: "",
        second: ""
      },
      container: [],
      minutesOne: {
        zero: false,
        one: false,
        two: false,
        three: false,
        four: false,
        five: false,
        six: false
      },
      minutesTwo: {
        zero: false,
        one: false,
        two: false,
        three: false,
        four: false,
        five: false,
        six: false
      },

      secondOne: {
        zero: false,
        one: false,
        two: false,
        three: false,
        four: false,
        five: false,
        six: false
      },
      secondTwo: {
        zero: false,
        one: false,
        two: false,
        three: false,
        four: false,
        five: false,
        six: false
      },
      // 0~9 数字控制
      control: [
        {
          zero: true,
          one: true,
          two: true,
          three: true,
          four: true,
          five: true,
          six: false
        },
        {
          zero: false,
          one: true,
          two: true,
          three: false,
          four: false,
          five: false,
          six: false
        },
        {
          zero: true,
          one: true,
          two: false,
          three: true,
          four: true,
          five: false,
          six: true
        },
        {
          zero: true,
          one: true,
          two: true,
          three: true,
          four: false,
          five: false,
          six: true
        },
        {
          zero: false,
          one: true,
          two: true,
          three: false,
          four: false,
          five: true,
          six: true
        },
        {
          zero: true,
          one: false,
          two: true,
          three: true,
          four: false,
          five: true,
          six: true
        },
        {
          zero: true,
          one: false,
          two: true,
          three: true,
          four: true,
          five: true,
          six: true
        },
        {
          zero: true,
          one: true,
          two: true,
          three: false,
          four: false,
          five: false,
          six: false
        },
        {
          zero: true,
          one: true,
          two: true,
          three: true,
          four: true,
          five: true,
          six: true
        },
        {
          zero: true,
          one: true,
          two: true,
          three: true,
          four: false,
          five: true,
          six: true
        }
      ],
      timer: null,
      F2: null,
      G2: null,
      F3: null,
      G3: null,
      F4: null,
      G4: null
    };
  },
  methods: {
    start() {
      // setTimeout(code,millisec,lang)
      /**
       * @param _second
       * @param _mintues
       */
      let _this = this;
      _this.timer = null;

      let _second = 0;
      let _minutes = 0;

      let second = 9;
      let minute = 0;

      let total = minute * 60 + second * 1;

      this.timer = setInterval(function() {
        if (total >= 0) {
          // _minutes = Math.floor(total / 60);
          // minutes < 10 ? (minutes = "0" + minutes) : (minutes = "" + minutes);
          _minutes =
            Math.floor(total / 60) > 10
              ? "" + Math.floor(total / 60)
              : "0" + Math.floor(total / 60);
          _second =
            Math.floor(total % 60) > 10
              ? "" + Math.floor(total % 60)
              : "0" + Math.floor(total % 60);
          // console.log(_second[0], _second[1]);
          // 对四个div进行切换
          _this.minutesOne = _this.control[_minutes[0]];
          _this.minutesTwo = _this.control[_minutes[1]];
          _this.secondOne = _this.control[_second[0]];
          _this.secondTwo = _this.control[_second[1]];

          --total;
        } else {
          clearInterval(_this.timer);
          // 跳转至排行界面
          _this.$router.push({ path: "/final" });
        }
      }, 1000);
    },
    end() {
      console.log("end");
      clearInterval(this.timer);
      this.timer = null;
    }
    // CCC() {
    //   window.requestAnimationFrame =
    //     window.requestAnimationFrame ||
    //     window.mozRequestAnimationFrame ||
    //     window.webkitRequestAnimationFrame ||
    //     window.msRequestAnimationFrame;

    //   var canvas = this.$refs["canvas"],
    //     ctx = canvas.getContext("2d"),
    //     canvasW = document.body.clientWidth,
    //     canvasH = document.body.clientHeight;

    //   ctx.fillStyle = "black";

    //   canvas.width = canvasW;
    //   canvas.height = canvasH;

    //   var mouse = {
    //     x: canvasW / 2,
    //     y: canvasH / 2,
    //     dx: 0,
    //     dy: 0
    //   };

    //   var emitter = {
    //     h: 50,
    //     x: canvasW / 2 - 250,
    //     y: canvasH / 2,
    //     vx: 5,
    //     vy: 5,
    //     v: 0.05,
    //     dx: 0,
    //     dy: 0
    //   };

    //   var stops = [50, 150, 160, 300, 500],
    //     stopIndex = 0,
    //     delay = 0,
    //     prog = 0;

    //   var circle = {
    //     radius: 125,
    //     angle: 0
    //   };

    //   var particles = new Array();

    //   var rate = 2,
    //     time = 0,
    //     frameIndex = rate;

    //   var simplex = new this.SimplexNoise(),
    //     simplexVal = 0,
    //     simplexStart = 20;

    //   //Start loop
    //   draw();

    //   //Draw
    //   function draw() {
    //     ctx.globalCompositeOperation = "source-over";
    //     ctx.fillStyle = "rgba(0,0,0,0.5)";
    //     ctx.fillRect(0, 0, canvasW, canvasH);
    //     ctx.globalCompositeOperation = "lighter";

    //     //Draw loading
    //     ctx.fillStyle = "#000";
    //     ctx.fillRect(
    //       canvasW / 2 - 250,
    //       emitter.y - emitter.h / 2,
    //       500,
    //       emitter.h
    //     );
    //     ctx.strokeStyle = "rgba(0,255,0,0.5)";
    //     ctx.strokeRect(
    //       canvasW / 2 - 250,
    //       emitter.y - emitter.h / 2,
    //       500,
    //       emitter.h
    //     );
    //     ctx.font = "20pt Arial";
    //     ctx.fillStyle = "rgba(0,255,0,0.5)";
    //     ctx.fillText(
    //       Math.floor(prog / 5) + "%",
    //       canvasW / 2 - 20,
    //       canvasH / 2 + 10
    //     );

    //     //Move emitter
    //     //console.log(stops[stopIndex]+' '+prog+' '+delay);
    //     if (stops[stopIndex] == prog) {
    //       stopIndex++;
    //       delay = 50;
    //     } else {
    //       if (delay == 0 && prog < stops[stopIndex]) {
    //         emitter.dx = -1;
    //         emitter.x += 2;
    //         prog += 2;
    //       } else {
    //         emitter.dx = 0;
    //         delay--;
    //       }
    //     }

    //     //Draw emitter
    //     ctx.fillStyle = "#0f0";
    //     ctx.fillRect(emitter.x, emitter.y - emitter.h / 2, 1, emitter.h);

    //     //Draw particles
    //     var i = 0;
    //     for (i in particles) {
    //       var p = particles[i];

    //       //Check if die
    //       if (time > p.die) {
    //         p.o -= 0.01;
    //         if (p.o < 0) {
    //           particles.splice(i, 1);
    //         }
    //       }

    //       //Add v
    //       p.x += p.vx;
    //       p.y += p.vy;

    //       //Add source move
    //       p.x += p.sourcedx / 10;
    //       p.y += p.sourcedy / 10;

    //       //Simplex noise
    //       if (p.simplexIndex > simplexStart) {
    //         p.simplexVal = simplex.noise3D(p.x / 100, p.y / 100, time / 100);
    //       }

    //       p.simplexIndex++;
    //       p.x += p.simplexVal;
    //       p.y += p.simplexVal;

    //       //If (almost) outside canvas
    //       if (p.x < 0 + 20 || p.x > canvasW - 20) {
    //         p.vx *= -1.015;
    //       }
    //       if (p.y < 0 + 20 || p.y > canvasH - 20) {
    //         p.vy *= -1.015;
    //       }

    //       ctx.beginPath();
    //       ctx.fillStyle = "rgba(0, " + p.green + ", 0, " + p.o + ")";
    //       ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, true);
    //       ctx.fill();
    //       ctx.save();
    //     }

    //     //if emitter is moving
    //     if (emitter.dx !== 0) {
    //       for (var i = 0; i < rate; i++) {
    //         //Create particle
    //         var particle = {
    //           x: emitter.x,
    //           y: emitter.y + (Math.random() * emitter.h - emitter.h / 2),
    //           r: Math.random() + 0.5,
    //           vx: Math.random() * -2,
    //           vy: Math.random() - 0.5,
    //           o: 1,
    //           birth: time,
    //           die: time + (Math.random() * 50 + 50), //1+1),
    //           sourcedx: emitter.dx,
    //           sourcedy: emitter.dy,
    //           red: Math.round(Math.random() * 255),
    //           green: Math.round(Math.random() * 255),
    //           blue: Math.round(Math.random() * 255),
    //           simplexVal: 0,
    //           simplexIndex: 0
    //         };

    //         particles.push(particle);
    //       }
    //     }

    //     time++;
    //     window.requestAnimationFrame(draw);
    //   }

    //   $(window).mousemove(function(e) {
    //     mouse.dx = e.pageX - mouse.x;
    //     mouse.dy = e.pageY - mouse.y;

    //     mouse.x = e.pageX;
    //     mouse.y = e.pageY;
    //   });
    // },
    // SimplexNoise(random) {
    //   if (!random) random = Math.random;
    //   this.p = new Uint8Array(256);
    //   this.perm = new Uint8Array(512);
    //   this.permMod12 = new Uint8Array(512);
    //   for (var i = 0; i < 256; i++) {
    //     this.p[i] = random() * 256;
    //   }
    //   for (i = 0; i < 512; i++) {
    //     this.perm[i] = this.p[i & 255];
    //     this.permMod12[i] = this.perm[i] % 12;
    //   }
    // }
    // // 检测
    // check() {
    //   // amd
    //   if (typeof define !== "undefined" && define.amd)
    //     define(function() {
    //       return SimplexNoise;
    //     });
    //   //common js
    //   if (typeof exports !== "undefined") exports.SimplexNoise = SimplexNoise;
    //   // browser
    //   else if (typeof navigator !== "undefined")
    //     this.SimplexNoise = SimplexNoise;
    //   // nodejs
    //   if (typeof module !== "undefined") {
    //     module.exports = SimplexNoise;
    //   }
    // }
  },
  mounted() {
    for (let i = 1; i <= 60; i++) {
      let _second = { label: i, value: i };
      this.container.push(_second);
    }
    clearInterval(this.timer);
    this.timer = null;
    let _this = this;
    setTimeout(function() {
      _this.start();
    }, 3000);
    // 初始化数组
    // this.CCC();
    // this.check();
  }
};
</script>
<style scoped>
i {
  color: #fff;
  font-style: normal;
}
.controlBoard {
  margin-top: 5rem;
  margin-left: 6rem;
}
.time {
  /* 实现元素居中 */
  margin: 0 auto;
  margin-top: 10rem; /* 上浮一点 */
  text-align: center;
}
.time .digit {
  width: 300px;
  height: 600px;
  margin: 0 5px;
  position: relative;
  display: inline-block;
}

.digit .segment {
  /*background:#00FF00;*/
  border-radius: 10px;
  position: absolute;
  opacity: 0.1;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
}

.digit .segment.on,
.separator {
  opacity: 1;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.1);
  transition: opacity 0s;
  -webkit-transition: opacity 0s;
  -ms-transition: opacity 0s;
  -moz-transition: opacity 0s;
  -o-transition: opacity 0s;
}

.time .separator {
  width: 20px;
  height: 20px;
  /*background:#00FF00;*/
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: -290px;
}

.digit .segment:nth-child(1) {
  top: 10px;
  left: 20px;
  right: 20px;
  height: 20px;
}

.digit .segment:nth-child(2) {
  top: 20px;
  right: 10px;
  width: 20px;
  height: 75px;
  height: calc(50% - 25px);
}

.digit .segment:nth-child(3) {
  bottom: 20px;
  right: 10px;
  width: 20px;
  height: 75px;
  height: calc(50% - 25px);
}

.digit .segment:nth-child(4) {
  bottom: 10px;
  right: 20px;
  height: 20px;
  left: 20px;
}

.digit .segment:nth-child(5) {
  bottom: 20px;
  left: 10px;
  width: 20px;
  height: 75px;
  height: calc(50% - 25px);
}

.digit .segment:nth-child(6) {
  top: 20px;
  left: 10px;
  width: 20px;
  height: 75px;
  height: calc(50% - 25px);
}

.digit .segment:nth-child(7) {
  bottom: 95px;
  bottom: calc(50% - 5px);
  right: 20px;
  left: 20px;
  height: 20px;
}
.segment {
  background: red;
}
.separator {
  background: red;
}
.basic {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
